import React from "react";
import { useNavigate, Link, Outlet } from "react-router-dom";
import "./homePage.less";
import { message } from 'antd'
import {
  DownOutlined
} from "@ant-design/icons";
import { Menu, Image,Dropdown } from "antd";
import { useState } from "react";
// import { getMenuApi } from '../../api/login'
const { SubMenu } = Menu;
const activateLasers=(e)=>{
  localStorage.removeItem("userIofr")
  localStorage.removeItem("routerlist")
  localStorage.removeItem("token")
  message.success('登出成功');
  console.log(e);
}
const menu = (
  <Menu>
    <Menu.Item>
      <Link to="/homePage/Home">个人中心</Link>
    </Menu.Item>
    <Menu.Item>
      <Link to="/login" onClick={activateLasers}>退出登录</Link>
    </Menu.Item>
  </Menu>
);

export default () => {
  const native = useNavigate();
  const [collapsed, setCollapsed] = useState(false);
  let routerlist=JSON.parse(localStorage.getItem("routerlist"));
  return (
    <div className="homePage">
      <div className="head">
        <div className="head-left">
        
        </div>
        <h1>欢迎回家！</h1>
        <div className="head-right">
          <Image className="right-bj" src={require('./assets/bj.jpg')} />
          <span className="right-icon">
            <Dropdown overlay={menu} trigger={["click"]}>
              <DownOutlined />
            </Dropdown>
          </span>
        </div>
      </div>
      <div className="left">
        <Menu
          mode="inline"
          theme="dark"
          // inlineCollapsed={false}
          defaultSelectedKeys={['/homePage/Home']}
          inlineCollapsed={collapsed}
        >
          {routerlist.map((item, index) => {
            if (item.children) {
              return (
                <SubMenu key={item.path} title={item.title}>
                  {item.children.map((item) => {
                    return (
                      <Menu.Item key={item.path}>
                        <Link to={item.path}>{item.title}</Link>
                      </Menu.Item>
                    );
                  })}
                </SubMenu>
              );
            } else {
              return (
                <Menu.Item key={item.path}>
                  <Link to={item.path}>{item.title}</Link>
                </Menu.Item>
              );
            }
          })}

        </Menu>
      </div>
      <div className="right"><Outlet /></div>
    </div>
  );
};
